<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2020/10/22
  Time: 20:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>入库信息</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js" charset="GBK"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <link href="${pageContext.request.contextPath}/static/toastr-master/toastr.min.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/static/toastr-master/toastr.min.js" charset="GBK"></script>
</head>
<style>
    .layui-table th {
        font-weight: bold;
    }

    /*下拉框高度*/
    .layui-unselect dl {
        max-height: 120px;
    }

</style>
<body style="padding: 3px">
<!--上侧搜索表单按钮组-->
<div class="layui-elem-field">
    <form class="layui-form layui-form-pane">
        <div class="layui-row">
            <div class="layui-inline layui-col-md-offset1">
                <label class="layui-form-label">入库人</label>
                <div class="layui-input-block">
                    <input type="text" name="staffName" class="layui-input" placeholder="输入入库人">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">经手人</label>
                <div class="layui-input-inline">
                    <input type="text" name="jsr" class="layui-input" placeholder="输入经手人">
                </div>
            </div>
        </div>
        <hr>
        <div class="layui-row">
            <div class="layui-inline layui-col-md-offset1">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-block">
                    <input type="text" id="searchCreatedTime" name="createdTime" class="layui-input" placeholder="开始时间">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="searchEndTime" name="endTime" class="layui-input" placeholder="结束时间">
                </div>
                <button type="button" lay-submit lay-filter="searchBtn"
                        class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search">搜索
                </button>
                <button type="reset" class="layui-btn" id="searchReset">重置</button>
            </div>
        </div>
    </form>
</div>

<!--数据表格-->
<table class="layui-hide " id="rukuTable" lay-filter="rukuTable"></table>

<!--上侧按钮组-->
<div class="layui-hide" id="userToolbar">
    <label class="layui-icon layui-icon-refresh layui-anim layui-anim-scaleSpring" lay-event="refresh"></label>
</div>

<!--数据表格右侧按钮组-->
<div class="layui-hide" id="userBar">
    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="information">查看详情</button>
</div>

<%--入库详情信息表格--%>
<div class="layui-elem-field" style="display: none;border: 0" id="informationDiv">
    <table class="layui-hide" id="informationTable" lay-filter="informationTable"></table>
    总金额：<label id="totalprice"></label>，入库人：<label id="staffName"></label>，时间：<label id="rdate"></label>

</div>

<script>
    layui.use('table', function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        //查询的提交事件
        form.on('submit(searchBtn)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            //刷新一下table

            table.reload('rukuTable', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    staffName: data.field.staffName,
                    jsr: data.field.jsr,
                    createdTime: $("#searchCreatedTime").val(),
                    endTime: $("#searchEndTime").val()
                },
                page: {
                    curr: 1
                }
            });

            return false;
        });
        //重置时要刷新表格
        $("#searchReset").click(function () {
            showTable()
        });

        //渲染入库单表格-showTable()
        function showTable() {
            table.render({
                elem: '#rukuTable'
                , url: '/rukuServlet/getAllRuku'//数据接口
                , toolbar: '#userToolbar'
                , even: true //开启隔行背景
                , page: true //开启分页
                , text: {
                    none: '暂无相关数据'
                }
                , cols: [[ //表头
                    {field: 'rukuid', title: 'ID', align: 'center'}
                    , {field: 'totalprice', title: '总金额', align: 'center'}
                    , {field: 'totalcount', title: '总数量(本)', align: 'center'}
                    , {field: 'uid', title: '入库人Id', align: 'center', hide: true}
                    , {field: 'staffName', title: '入库人', align: 'center'}
                    , {field: 'jsr', title: '经手人', align: 'center'}
                    , {field: 'rdate', title: '入库时间', align: 'center'}
                    , {fixed: 'right', title: '操作', toolbar: '#userBar', align: 'center'}
                ]]
                , limit: 10
                , limits: [3, 5, 8, 10, 20, 50]
            });
        }

        //监听头部工具栏
        table.on("toolbar(rukuTable)", function (obj) {
            switch (obj.event) {
                case 'refresh':
                    showTable();
                    break;
            }
        });

        //监听右侧工具栏
        table.on('tool(rukuTable)', function (obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            if (obj.event === 'information') {
                //layer.msg(JSON.stringify(data))
                showInformationDiv(data)
            }
        });

        //页面加载完成，调用的方法
        $(function () {
            //页面加载完成,初始化员工表
            showTable();
        });

        //渲染入库单表格-showTable()
        function showInformationTable(data) {
            table.render({
                elem: '#informationTable'
                , url: '/rukuServlet/getAllRukuDetailByRukuId'
                , where: {rukuid: data}
                , even: true //开启隔行背景
                , text: {
                    none: '暂无相关数据'
                }
                , cols: [[ //表头
                    {field: 'rdid', title: 'ID', align: 'center'}
                    , {field: 'bookid', title: '书的Id', align: 'center', hide: true}
                    , {field: 'bookname', title: '书名', align: 'center'}
                    , {field: 'author', title: '作者', align: 'center'}
                    , {field: 'rukuid', title: '入库Id', align: 'center'}
                    , {field: 'publisher', title: '出版社', align: 'center'}
                    , {field: 'count', title: '数量(本)', align: 'center'}
                    , {field: 'pushprice', title: '进价', align: 'center'}
                ]]
            });
        }

        //打开订单详情弹出框
        function showInformationDiv(data) {
            let rukuid = data.rukuid;
            layer.open({
                type: 1,
                anim: 3,
                title: ['入库详情', 'font-size:20px'],
                content: $("#informationDiv"),
                offset: '100px',
                area: '900px',
                success: function () {
                    $("#totalprice").html(data.totalprice);
                    $("#staffName").html(data.staffName);
                    $("#rdate").html(data.rdate);
                    showInformationTable(rukuid)
                }
            })
        }

    })
</script>
</body>
<%--日期选择模块加载--%>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#searchCreatedTime' //指定元素
            , calendar: true
        });
        laydate.render({
            elem: '#searchEndTime' //指定元素
            , calendar: true
        });
    });
</script>
</html>
